<template>
  <div>
    <el-card>
      <div>
        <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
          <el-form-item label="用户名">
            <el-input placeholder="请输入" v-model="queryData.nickname">
            </el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input placeholder="请输入" v-model="queryData.username"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请输入" v-model="queryData.status" clearable>
              <el-option v-for="(item, index) in stateList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <!-- <span class="demonstration">Default</span> -->
            <el-date-picker v-model="queryData.create_time" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" :size="size" value-format="x" />
          </el-form-item>
          <el-form-item style="margin-left:1055px; margin-top: -50px;">
            <!-- <template> -->
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <!-- <el-button @click="onReset">重置</el-button> -->
            <!-- </template> -->
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-bottom: 5px;">
        <el-button type="primary" @click="addRef.isShow = true">添加角色</el-button>
        <el-button @click="onReset">刷新</el-button>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="ID" prop="id"></el-table-column>
        <el-table-column prop="nickname" label="用户名"></el-table-column>
        <el-table-column label="头像" prop="avatar">
          <template #default="{ row }">
            <img :src="`http://124.223.14.236:8881${row.avatar}`" style="width: 50px; height: 50px;" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column label="Email" prop="email">
        </el-table-column>
        <el-table-column label="角色名" prop="username">
          <template #default="{ row }">
            <div v-for="role in row.roleList" :key="role.id">
              {{ role.name }} <!-- 使用指定的 key 来显示值 -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success" size="small">修改</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delUser(row.id)">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        :page-sizes="[3, 5, 10]" v-model:page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="count" background>
      </el-pagination>
    </el-card>
    <addForm ref="addRef" :roleList="roleList" @updateList=" getList(USERTAB, queryData)" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useListAsync } from '../../../xf-hook/getList.js'
import { USERTAB } from '../../../urlConst/getUrl.js'
import { useChangePage } from '../../../xf-hook/page.js'
import { getRoleApi, delUserApi } from '../../../api/user.js'
import { useSeekState } from '../../../xf-hook/index'
import addForm from './addForm.vue'
import { ElMessage } from "element-plus";
const { getList, list, count } = useListAsync()
const stateList = useSeekState()
const queryData = reactive({
  create_time: null,
  current: 1,
  pageSize: 10,
  username: '',
  nickname: '',
  status: '',
  phone: ''
})
const onSearch = async () => {
  queryData.create_time = queryData.create_time.join(',')
  await getList(USERTAB, queryData)
  queryData.nickname = ''
  queryData.username = ''
  queryData.status = ''
}
const addRef = ref()
const pageChange = useChangePage()
const sizeChange = (val) => {
  pageChange.sizeChange(val, queryData.pageSize)
  getList(USERTAB, queryData)
}
const roleList = ref([])
const getRoleList = async () => {
  let res = await getRoleApi()
  roleList.value = res.data
}
const currentChange = (val) => {
  pageChange.currentChange(val, queryData.current)
  getList(USERTAB, queryData)
}
const editRow = (id) => {
  addRef.value.replyData(id);
};
const delUser = async (id) => {
  let res = await delUserApi(id)
  ElMessage(res.msg)
  getList(USERTAB, queryData)
}
onMounted(() => {
  getList(USERTAB, queryData)
  getRoleList()
})
</script>

<style scoped></style>